<?php $this->load->view('admin/admin_header');?>
		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<div class="page-content">
				<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
				<div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
								<h4 class="modal-title">Modal title</h4>
							</div>
							<div class="modal-body">
								 Widget settings form goes here
							</div>
							<div class="modal-footer">
								<button type="button" class="btn blue">Save changes</button>
								<button type="button" class="btn default" data-dismiss="modal">Close</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
				<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
				<!-- BEGIN STYLE CUSTOMIZER -->
				<div class="theme-panel">
					<div class="toggler tooltips" data-container="body" data-placement="left" data-html="true" data-original-title="Click to open advance theme customizer panel">
						<i class="icon-settings"></i>
					</div>
					<div class="toggler-close">
						<i class="icon-close"></i>
					</div>
					<div class="theme-options">
						<div class="theme-option theme-colors clearfix">
							<span>
							THEME COLOR </span>
							<ul>
								<li class="color-default current tooltips" data-style="default" data-container="body" data-original-title="Default">
								</li>
								<li class="color-grey tooltips" data-style="grey" data-container="body" data-original-title="Grey">
								</li>
								<li class="color-blue tooltips" data-style="blue" data-container="body" data-original-title="Blue">
								</li>
								<li class="color-dark tooltips" data-style="dark" data-container="body" data-original-title="Dark">
								</li>
								<li class="color-light tooltips" data-style="light" data-container="body" data-original-title="Light">
								</li>
							</ul>
						</div>
						<div class="theme-option">
							<span>
							Theme Style </span>
							<select class="layout-style-option form-control input-small">
								<option value="square" selected="selected">Square corners</option>
								<option value="rounded">Rounded corners</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Layout </span>
							<select class="layout-option form-control input-small">
								<option value="fluid" selected="selected">Fluid</option>
								<option value="boxed">Boxed</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Header </span>
							<select class="page-header-option form-control input-small">
								<option value="fixed" selected="selected">Fixed</option>
								<option value="default">Default</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Top Dropdown</span>
							<select class="page-header-top-dropdown-style-option form-control input-small">
								<option value="light" selected="selected">Light</option>
								<option value="dark">Dark</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Sidebar Mode</span>
							<select class="sidebar-option form-control input-small">
								<option value="fixed">Fixed</option>
								<option value="default" selected="selected">Default</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Sidebar Style</span>
							<select class="sidebar-style-option form-control input-small">
								<option value="default" selected="selected">Default</option>
								<option value="compact">Compact</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Sidebar Menu </span>
							<select class="sidebar-menu-option form-control input-small">
								<option value="accordion" selected="selected">Accordion</option>
								<option value="hover">Hover</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Sidebar Position </span>
							<select class="sidebar-pos-option form-control input-small">
								<option value="left" selected="selected">Left</option>
								<option value="right">Right</option>
							</select>
						</div>
						<div class="theme-option">
							<span>
							Footer </span>
							<select class="page-footer-option form-control input-small">
								<option value="fixed">Fixed</option>
								<option value="default" selected="selected">Default</option>
							</select>
						</div>
					</div>
				</div>
				<!-- END STYLE CUSTOMIZER -->
				<!-- BEGIN PAGE HEADER-->
				<h3 class="page-title">
				Create Datables <small>Create datatable samples</small>
				</h3>
				<div class="page-bar">
					<ul class="page-breadcrumb">
						<li>
							<i class="fa fa-home"></i>
							<a href="index.html">Home</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="#">Data Tables</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="#">Create Datatables</a>
						</li>
					</ul>
					<div class="page-toolbar">
						<div class="btn-group pull-right">
							<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
							Actions <i class="fa fa-angle-down"></i>
							</button>
							<ul class="dropdown-menu pull-right" role="menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider">
								</li>
								<li>
									<a href="#">Separated link</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- END PAGE HEADER-->
						<div class="row">
					<div class="col-md-12">
						<!-- BEGIN VALIDATION STATES-->
						<div class="portlet box blue">
										<div class="portlet-title">
											<div class="caption">
												<i class="fa fa-gift"></i>Things and Places
											</div>
											<div class="tools">
												<a href="javascript:;" class="collapse">
												</a>
												<a href="#portlet-config" data-toggle="modal" class="config">
												</a>
												<a href="javascript:;" class="reload">
												</a>
												<a href="javascript:;" class="remove">
												</a>
											</div>
										</div>
										<div class="portlet-body form">
											<!-- BEGIN FORM-->
													<?php echo form_open_multipart('admin/things_places/add_things_places/', array('class'=>'horizontal-form'));?>	<div class="form-body">
													<h3 class="form-section">Article Create</h3>
													<div class="row">
														<div class="col-md-6">
															<div class="form-group">
																<label class="control-label">Article Type</label>
																<select name="article_type" class="form-control">
																	<option value="">select</option>
																	<?php foreach($article_list->result as $list):?>
																		<option value="<?php echo $list->article_id?>"><?php echo $list->article_name;?></option>
																	<?php endforeach;?>
																</select><?php echo form_error('article_type');?>
															</div>
														</div>
														<div class="col-md-6">
															<div class="form-group">
																<label class="control-label">Place</label>
																<input name="place" type="text" id="firstName" class="form-control"><?php echo form_error('place');?>
															</div>
														</div>
														<div class="col-md-6">
															<div class="form-group">
																<label class="control-label">Location</label>
																<input name="location" type="text" id="firstName" class="form-control"><?php echo form_error('location');?>
															</div>
														</div>														
													</div>
													<div class="row">
														<div class="col-md-6">
													<div class="form-group">
													<label class="control-label">Content</label>
													<textarea name="content" class="form-control" rows="6" cols="50"></textarea><?php echo form_error('content');?>
													</div>
													</div>
													</div>
												<div class="row">
													<div class="col-md-6" id="things_title">
														<div class="form-group">
															<label class="control-label">Image Title</label>
															<input name="image_title[]" type="text" id='image_title' class="form-control">	
														</div>
													</div>	
													<div class="col-md-6" id="thingsfile">
														<div class="form-group">
															<label class="control-label">Image</label>
															<input name="image" id="image_file" type="file" >
														</div>														
													</div>														
												</div>
												<div id="addedRows"></div>
												<a onclick="addMoreRows(this.form);">Add New</a>
												</div>
												<div class="form-actions right">
													<a href="<?php echo base_url().'index.php/admin/things_places';?>" class="btn default">Cancel</a>
													<button type="submit" class="btn blue"><i class="fa fa-check"></i> Save</button>
												</div>
											<?php echo form_close(); ?>
											<!-- END FORM-->
										</div>
									</div>
										
	<!-- END CONTAINER -->
<?php echo $this->load->view('admin/admin_footer');?>
<script type="text/javascript">
var rowCount = '';
function addMoreRows(frm) {
rowCount ++;
var recRow = '<div class="row" id="rowCount'+rowCount+'"><div class="col-md-6"><div class="form-group"><input type="text" class="form-control" name="image_title[]"/></div></div><div class="col-md-6"><div class="form-group"><input type="file" name="image[]"/><button type="button" onclick="removeRow('+rowCount+');">Remove</button></div></div></div>';
if($('#image_file').val() !== ''){
jQuery('#addedRows').append(recRow);
}else{
	alert('please choose');
}
}

function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>